<template>
	<view class="container">
		<carHeader :title="'保养导航'">
		</carHeader>
		<!-- 地图框框 -->
		<view class="page-body">
			<view class="map">
				<map style="width: 100%; height: 100%;" :latitude="latitude" :longitude="longitude" :markers="covers"
					:enable-3D="true" :show-compass="true">
				</map>
			</view>
			<view class="car-box">
				<view class="box-header">
					<text class="box-title">车百事汽车生活馆</text>
				</view>
				<view class="box-content">
					<text class="box-text">山阳区人民路与解放路口交叉口</text>
				</view>
			</view>
			<view class="button">
				<button @click="uni.navigateTo({
					url: ''
				})">导航</button>
			</view>

		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: 0, // 使用 marker点击事件 需要填写id
				title: 'map',
				latitude: 34.826128,
				longitude: 113.558902,
				covers: [{
					latitude: 34.826128,
					longitude: 113.558902,
					iconPath: '../../../static/location.png'
				}, ]
			}
		},
		methods: {

		}
	}
</script>

<style lang="scss">
	.container {
		height: 100vh;
	}

	.slot {
		padding-top: 10rpx;
	}

	.page-body {
		width: 96%;
		height: 90%;
		background-color: white;
		margin-left: 2%;
		margin-top: -230rpx;
	}

	.map {
		width: 94%;
		height: 86%;
		// background-color: #999999;
		margin-left: 3%;
		padding-top: 3%;
		padding-bottom: 3%;
	}

	.car-box {
		width: 60%;
		float: left;
		padding-top: 20rpx;
		background-color: white;
		padding-left: 5%;
	}

	.box-header {
		// background-color: aqua;

	}

	.box-title {
		// background-color: red;
		font-size: 35rpx;
	}

	.box-content {
		// background-color: bisque;
	}

	.box-text {
		padding-top: 20rpx;
		// background-color: azure;
		color: #999999;
		font-size: 25rpx;
	}

	.button {
		width: 180rpx;
		float: right;
		background-color: white;
		padding-left: 23rpx;
		padding-right: 5%;

		button {
			margin-top: 20rpx;
			background-color: #2175F2;
			border-radius: 50rpx;
			color: white;
		}

	}
</style>